<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>f6_activity</title>
  </head>
  <link rel="stylesheet" href="./static/1.10.1APlayer.min.css">
  <script src="./static/1.10.1APlayer.min.js"></script>
  <link rel="stylesheet" href="./static/animate.css">
  
  <style>
      html,body{
        width: 100%;
        height: 100%;
      }
      #app{
        width:100%;
        height:100%
      }
      #player1{
        position: absolute;
        top:10px;
        right: 10px;
        opacity: 0.6;
        z-index: 999;
      }
      .music_wrapper{
        border:1px solid black;
        width:30px;
        height: 30px;
        border-radius: 50%;
        position: absolute;
        top:10px;
        right: 10px;
        opacity: 0.6;
        z-index: 999;
      }
      .music{
        height: 30px;
        width: 30px;
      }
      .music_player{
        transform-origin: 100% 50%;
        -webkit-transform-origin: 50% 50%;
        animation:3s linear 0s myrotate infinite;
        -webkit-animation:3s linear 0s myrotate infinite;/* Safari and Chrome */
    
    }
    @keyframes myrotate{
        form {transform:rotateZ(0deg);}    
        to    {transform:rotateZ(360deg);}
    }
    @-webkit-keyframes myrotate{/* Safari and Chrome */
        form {transform:rotateZ(0deg);}    
        to    {transform:rotateZ(360deg);}
    }
    /*第一个时间代表完成一次运动所消耗的时间，第二个时间代表动画于多少时间后开始播放*/
    /*linear代表线性运动（匀速运动）；infinite为无限运动（一直运动）*/
    </style>
  <body>
      <!-- <div id="player1"></div> -->
    <div id="app"></div>
    <div class="music_wrapper"><img src="./static/img/music.png" class="music music_player"></div>
<audio controls="controls" autoplay="autoplay" controls="controls" id="player1" preload="auto" style="visibility: hidden" loop="loop">
  <source src="http://file.rzkeji.com/web/f6_activity/494434_pavlo-butorin_positive-swing.mp3" type="audio/mp3">
  <source src="http://file.rzkeji.com/web/f6_activity/494434_pavlo-butorin_positive-swing.mp3" type="audio/ogg">
  <embed height="50px" width="100px" src="http://file.rzkeji.com/web/f6_activity/494434_pavlo-butorin_positive-swing.mp3">
</audio>

    <!-- built files will be auto injected -->
  </body>
</html>

<script>
// var ap = new APlayer
//                 ({
//                     element: document.getElementById('player1'),
//                     mini: true,
//                     autoplay: false,
//                     // showlrc: true,
//                     music: {
//                             title: '遇见',
//                             author: '孙燕姿',
//                             url: 'http://music.163.com/song/media/outer/url?id=287035.mp3',
//                             // url:'http://fs.open.kugou.com/a487c35680f14aa834847f94f881598b/5c01576b/G020/M0A/02/10/tIYBAFWBr-aAAHVoAGYYA7WyMr8088.mp3',
//                             // pic: 'http://fmn.rrimg.com/fmn056/20120405/1250/b_large_LmC7_26b40000d7c81262.jpg'
//                             }
//                 })

window.onload=function(){
  
//   document.addEventListener('DOMContentLoaded', function () {
//     function audioAutoPlay() {
//         var audio = document.getElementById('player1');
//         audio.play();
//         // document.addEventListener("WeixinJSBridgeReady", function () {
//         //     audio.play();
//         // }, false);
//     }
// });



var audio = document.getElementById('player1');
var music=document.querySelector('.music');
music.onclick=function(){
  if (audio.paused) { //判读是否播放
            audio.play(); //没有就播放
      }else{
        audio.pause()
      }

  music.classList.toggle('music_player')
}

// document.addEventListener('touchstart',this.audioAutoPlay,false);
// document.addEventListener("WeixinJSBridgeReady", this.audioAutoPlay,false);
// music.onended=function(){
//   music.load()
//   music.play();
// }

function audioAutoPlay(id){
    var audio1 = document.getElementById(id),
        play = function(){
        audio1.play();
        document.removeEventListener("touchstart",play, false);
    };
    audio1.play();
    document.addEventListener("WeixinJSBridgeReady", function () {//微信
       play();
    }, false);
    document.addEventListener('YixinJSBridgeReady', function() {//易信
              play();
        }, false);
    document.addEventListener("touchstart",play, false);
}
audioAutoPlay('player1');


}
</script>


